<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Expenditure Salary</title>
	<style type="text/css">
        body {
            text-align: center;
            font: 15px sans-serif;
        }
        svg {
            font: 15px sans-serif;
        }
        .header {
            font: 15px sans-serif;
        }
        div.tooltip {
            position: absolute;
            text-align: left;
            padding: 8px;
            font: 10px sans-serif;
            background: #ddd;
            border: solid 1px #aaa;
            border-radius: 8px;
            /*pointer-events: none;*/
        }
        .sunburst {
        	margin: 20px;
        	padding: 10px;
        	border: solid 1px #aaa;
        }
        
        path {
  			cursor: pointer;
  			stroke: #fff;
  			fill-rule: evenodd;
		}
       
    </style>
    <script type="text/javascript" src="../js/d3.js"></script>
    <script src="../js/pace/pace.js"></script>
    <link href="../js/pace/themes/loadingBar.css" rel="stylesheet" />
</head>
<body>
	<script type="text/javascript">
		
        var header = d3.select("body").append("div").attr("id", "sunburstDiv");
		header.html("<a href='../index.html'><img src='../images/home_icon.png'></a> งบประมาณรายจ่ายประเภทเงินเดือนของบุคลากร มหาวิทยาลัยราชภัฏรำไพพรรณี <br/>");
        d3.json("../XPD005Controller?parameter=radioBox", function (error, data) {
            var radio = "ปีงบประมาณ";
            var check = true;
            data.forEach(function (d) {
                if (check) {
                    radio += " <input type='radio' name='year' value=" + d.period + " id='radioSun' checked='checked' onchange='getYear(this)'>" + d.period;
                    check = false;
                } else {
                    radio += " <input type='radio' name='year' value=" + d.period + " id='radioSun' onchange='getYear(this)'>" + d.period;
                }
            });

            d3.select("#sunburstDiv").append("div").attr("id", "radioBox").html(radio);
	           
			disableRadioBox("year");
            getSunburst(document.getElementById("radioSun").value);
	
	    }); //end d3.json
	    
	    function getYear(p) {

	        removeDiv("sunburst");

	        //disable radio box wait for generate
	        disableRadioBox("year");

	        getSunburst(p.value);
	    }
	    
	    function removeDiv(divName){
        	if(document.getElementById(divName)!=null){
        		document.getElementById(divName).remove();
        	}
        }
        
        function disableRadioBox(radioName){
        	var radioBox = document.getElementsByName(radioName);
			for (var i = 0; i < radioBox.length; i++) {
				radioBox[i].disabled = true;
			}
        }
        
        function enableRadioBox(radioName){
        	var radioBox = document.getElementsByName(radioName);
			for (var i = 0; i < radioBox.length; i++) {
				radioBox[i].disabled = false;
			}
        }
	    
		function getSunburst(periodYear){
		var width = 1024,
	     height = 900,
	     radius = (Math.min(width, height) / 2) - 100;
	
		 var x = d3.scale.linear()
		     .range([0, 2 * Math.PI]);
	
		 var y = d3.scale.linear()
		     .range([0, radius]);
	
	 	//var color = d3.scale.category20c();
	 	
	 	var color = d3.scale.ordinal()
	 		.domain(["เงินแผ่นดิน","เงินรายได้","งบประมาณ"])
	 		.range(["#85e02c","#5077da","#03fdf2"]);
	 	
		//d3.select("body").append("div").attr("id","sunburstDiv");
		d3.select("#sunburstDiv").append("div").attr("id", "sunburst");
		var svg = d3.select("#sunburst").append("svg")
		    .attr("width", width)
		    .attr("height", height)
		    .append("g")
		    .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
	
		var partition = d3.layout.partition()
		    .value(function (d) {
		        return d.amount;
		    });
	
		var arc = d3.svg.arc()
		    .startAngle(function (d) {
		        return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
		    })
		    .endAngle(function (d) {
		        return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
		    })
		    .innerRadius(function (d) {
		        return Math.max(0, y(d.y));
		    })
		    .outerRadius(function (d) {
		        return Math.max(0, y(d.y + d.dy));
		    });
		d3.json("../XPD005Controller?parameter=getExpenditureSalary&periodYear="+periodYear,function(error,data){
			var g = svg.selectAll("g")
           .data(partition.nodes(data))
           .enter().append("g");

       var path = g.append("path")
           .attr("d", arc)
           .attr("class","sunburst")
           .style("fill", function (d) {
               return color((d.children ? d : d.parent).name);
           })
           .on("mouseover",mouseOver)
           .on("mouseout",mouseOut)
           .on("click", click);

       var text = g.append("text")
           //.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
           //.attr("x", function(d) { return y(d.y); })
           .attr("transform", function (d) {
        	   var t = "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")";
               return "translate(" + arc.centroid(d) + ")";
           })
           .attr('text-anchor', function (d) {
               return "end";
           })
           .attr("dx", "30") // margin
           .attr("dy", ".35em") // vertical-align
           .html(function (d) {
               return "<tspan x=\"0\" dy=\"1.2em\">"+d.name +"</tspan>"+
               			"<tspan x=\"40\" dy=\"1.2em\">"+d.amount.toLocaleString("th-TH")+"</tspan>";
           });
       
       // Toggle children on mouseover.
       var tip = d3.select("body").append("div")
           .attr("class", "tooltip")
           .style("opacity", 1e-6);
       
       function mouseOver(d) {
           tip.transition().duration(500).style("opacity", 1);
           if(typeof d.budgetName != "undefined"){
        	   tip.html(d.budgetName +"<br/>"+d.name + "<br/> จำนวนเงิน: " + d.amount.toLocaleString("th-TH"))
               .style("left", (d3.event.pageX - 34) + "px")
               .style("top", (d3.event.pageY - 60) + "px");
           }else{
        	   tip.html(d.name + "<br/> จำนวนเงิน: " + d.amount.toLocaleString("th-TH"))
               .style("left", (d3.event.pageX - 34) + "px")
               .style("top", (d3.event.pageY - 60) + "px");
           }
           
       }

       function mouseOut() {
           tip.transition().duration(500).style("opacity", 1e-6);
       }
   
		function click(d) {
		     // fade out all text elements
		     text.transition().attr("opacity", 0);
		
		     path.transition()
		         .duration(750)
		         .attrTween("d", arcTween(d))
		         .each("end", function (e, i) {
		             // check if the animated element's data e lies within the visible angle span given in d
		             if (e.x >= d.x && e.x < (d.x + d.dx)) {
		                 // get a selection of the associated text element
		                 var arcText = d3.select(this.parentNode).select("text");
		                 // fade in the text element and recalculate positions
		                 arcText.transition().duration(750)
		                     .attr("opacity", 1)
		                     //.attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
		                     //.attr("x", function(d) { return y(d.y); });
		                     .attr("transform", function (d) {
		                         return "translate(" + arc.centroid(d) + ")";
		                     })
		                     .attr('text-anchor', function (d) {
		                         return "end";
		                     })
		             }
		         });
		}
		enableRadioBox("year");
	});//end d3
	
		d3.select(self.frameElement).style("height", height + "px");
	
		// Interpolate the scales!
		function arcTween(d) {
		    var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
		        yd = d3.interpolate(y.domain(), [d.y, 1]),
		        yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
		    return function (d, i) {
		        return i ? function (t) {
		            return arc(d);
		        } : function (t) {
		            x.domain(xd(t));
		            y.domain(yd(t)).range(yr(t));
		            return arc(d);
		        };
		    };
		}

	   function computeTextRotation(d) {
	       var ang = (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
	       return (ang > 90) ? 180 + ang : ang;
	   }
   }//end getSunburst
			 
	</script>

</body>
</html>